<template>
    <div class="mui-content carDoctorDetail mui-scroll-wrapper mgb2" id="DoctorDetailPull">
        <div class="mui-scroll">
            <ul class="mui-table-view mui-table-view-chevron mgt1">
                <li class="mui-table-view-cell">
                    <div class="col-2 headImgWrap">
                        <div class="headImg">
                            <img v-bind:src="doctor.cdImg" alt="{{doctor.cdName}}">
                        </div>
                    </div>
                    <div class="col-10 doctorInfo">
                        <p class="text1-size color1">{{doctor.cdName}}</p>
                        <p class="text3-size color2">{{doctor.cdEnterprise}}</p>
                    </div>
                </li>
            </ul>
            <ul class="mui-table-view mui-table-view-chevron mgt1">
                <li class="mui-table-view-cell mui-media">
                    <div class="col-2 text2-size color1">职称：</div>
                    <div class="col-10 jobTitleType">
                        <span class="jobCall"  v-for="jobCall in doctor.cdTitle">{{jobCall}}</span>
                    </div>
                </li>
                <li class="mui-table-view-cell mui-media">
                    <div class="col-2 text2-size color1">擅长：</div>
                    <div class="col-10 jobTitleType">
                        <span class="skillBtn"  v-for="skill in doctor.cdSkill">{{skill}}</span>
                    </div>
                </li>
            </ul>
        </div>
        <!--<div class="carDoctorInfo mui-text-center">
            <div class="carDoctorHead">
                <img v-bind:src="doctor.cdImg" alt="{{doctor.cdName}}" alt="">
            </div>
            <p class="carDoctorname color1 text1">{{doctor.cdName}}</p>
            <p class="carDoctorGrade color4 text3-size">（{{doctor.cdTitle}}）</p>
            <p class="carDoctorCompany color2 text3-size">{{doctor.cdEnterprise}}</p>
            <div class="skillLabel">
                <p class="skillLabelTitle mui-text-center text2 color1">专业擅长</p>
                <div class="skillLabelBtn mgt1">
                    <p v-for="skill in doctor.cdSkill" class="mui-btn mui-btn-primary mui-btn-outlined text4-size">{{skill}}</p>
                </div>
            </div>
            <div class="adviceBtn">
                <button class="mui-btn mui-btn-primary" @click="enquiry(doctor.cdAccount)">
                    <span class="mui-icon mui-icon-chatboxes text2-size"></span>
                    <span class="text2-size">向他提问</span>
                </button>
            </div>
        </div>-->
    </div>
    <!--钣喷询价按钮-->
    <div class="fixedOperate">
        <button class="mui-btn mui-btn-primary" @click="enquiry(doctor.cdAccount)">
            <span class="mui-icon mui-icon-chatboxes text1-size"></span>
            <span class="text2-size">提问</span>
        </button>
    </div>
</template>
<style>
    .carDoctorDetail .headImgWrap{padding-right: 0.15rem; position: relative;}
    .carDoctorDetail .headImg{width: 1rem !important; height: 1rem !important; border-radius: 100%; z-index: 120; max-height: 1rem; max-width: 1rem; display: inline-block; display: inline-block; overflow: hidden;}
    .carDoctorDetail .headImg img{width: 100%; display: inline-block;}
    .carDoctorDetail .doctorInfo{padding-top: 0.1rem;}
    .carDoctorDetail .doctorInfo p:last-child{line-height: 0.5rem;}
    /*职称*/
    .carDoctorDetail .jobCall{font-size: 0.25rem; padding: 0.01rem 0.1rem; display: inline-block; border: 1px solid #64CCFF; border-radius: 3px; color: #64CCFF; margin: 0 0.1rem 0.15rem 0;}
    /*擅长*/
    .carDoctorDetail .skillBtn{font-size: 0.25rem; padding: 0.01rem 0.1rem; display: inline-block; border: 1px solid #F39C12; border-radius: 3px; color: #F39C12; margin: 0 0.1rem 0.15rem 0;}
    /*状态*/
</style>
<script type="text/ecmascript-6">
		import '../../fonts/mui.css';
		import Page from '../../base/Page'
        import { API } from '../../config/constants'
        export default new Page({
            data(){
                return {
                	doctor : {}
                }
            },
            ready () {
            	this.getJSON(API.GET_CARDOCTOR_DETAIL, {id:this.$route.params.id}, res => {
            		this.doctor = res.resultData;
                    this.doctor.cdSkill = this.doctor.cdSkill.split(',');
                    this.doctor.cdTitle = this.doctor.cdTitle.split(',');
                });
                /*上拉下拉*/
                mui('.mui-scroll-wrapper').scroll({
                    indicators: true, //是否显示滚动条
                    deceleration : 0.0005,
                });

            },
            methods:{
            	enquiry:function(cdAccount){

            	    console.log(JSON.stringify(this.doctor));

            	    if (this.doctor.cdStatus != 1) {
                        mui.toast('当前车大夫不在线，请选择其他车大夫',{ duration:'short', type:'div' });
                        return;
                    }

            		//request
					this.getJSON(API.GET_ONLINE_ENQUIRY, {account:cdAccount}, res => {
					    //close weixin browser
                        WeixinJSBridge.invoke('closeWindow',{},function(res){});
	                });
				}
            },
    });
</script>

